<template>
  <el-dialog
    title="新增点位"
    :visible="visible"
    @open="openFn"
    @close="closeFn"
    width="630px"
  >
    <!-- :model="form" -->
    <el-form label-width="120px" :model="form" :rules="rules" ref="form">
      <el-form-item label="点位名称" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          style="width: 396px"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在区域" prop="regionId">
        <el-select
          v-model="form.regionId"
          placeholder="请选择活动区域"
          style="width: 396px"
        >
          <el-option
            v-for="item in areaList"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属商圈" prop="businessId">
        <el-select
          v-model="form.businessId"
          placeholder="请选择活动区域"
          style="width: 396px"
        >
          <el-option
            v-for="item in businessList"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属合作商" prop="value">
        <el-select
          v-model="form.value"
          placeholder="请选择活动区域"
          style="width: 396px"
          @change="changFn"
        >
          <el-option
            v-for="(item, index) in hzsList"
            :label="item.name"
            :value="item.name"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 插件级联 -->
      <el-form-item label="详细地址" prop="addressSelections">
        <el-cascader
          :options="addressData"
          :disabled="false"
          @change="handleAddress"
          style="width: 396px"
          v-model="form.addressSelections"
          placeholder="请选择省市区"
        ></el-cascader>
      </el-form-item>
      <el-form-item prop="dec">
        <el-input
          v-model="form.dec"
          type="textarea"
          placeholder="请输入详细地址"
          :rows="4"
          maxlength="60"
          autocomplete="off"
          style="width: 396px"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="start" align="center">
          <el-col :span="18">
            <el-button class="closeFn">取 消</el-button>
            <el-button
              style="margin-left: 20px"
              class="comfirm"
              @click="confirmFn"
              >确 定</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { CreatePonit, editList } from '@/api/point'
// editList
export default {
  props: {
    visible: Boolean,
    // 判断是否新增
    or: {
      type: Number,
      default: 1
    },
    // 商圈列表
    businessList: {
      type: Array,
      default: () => []
    },
    // 区域列表
    areaList: {
      type: Array,
      default: () => []
    },
    // 合作商列表
    hzsList: {
      type: Array,
      default: () => []
    },
    // 一行数据
    rows: {
      type: [Array, Object],
      default: () => {}
    }
  },
  created () {
    this.id = this.rows.id
    // console.log(this.id)

    const dec = this.rows.addr.split('-').pop()
    console.log(dec)
    this.form = {
      name: this.rows.name,
      regionId: this.rows.region.id,
      businessId: this.rows.businessId,
      value: this.rows.ownerName,
      addressSelections: this.form.addressSelections,
      dec,
      areaCode: this.rows.areaCode,
      ownerId: this.rows.ownerId,
      ownerName: this.rows.ownerName

    }
    this.openFn()
    this.editFn()
    // console.log(addr)
    // console.log(this.form.addressSelections.push(this.form.dec))
  },
  data () {
    return {
      form: {
        name: '',
        addr: '',
        areaCode: '',
        createUserId: '',
        regionId: '',
        businessId: '',
        ownerId: '',
        ownerName: '',
        value: '', // 测试地址
        dec: '', // 详情
        addressSelections: []
      },
      id: null,

      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            min: 0,
            max: 15,
            message: '长度在 0 到 15 个字符',
            trigger: 'blur'
          }
        ],
        regionId: [{ required: true, message: '请输入', trigger: 'blur' }],
        businessId: [{ required: true, message: '请输入', trigger: 'blur' }],
        value: [{ required: true, message: '请输入', trigger: 'blur' }],
        dec: [{ required: true, message: '请输入', trigger: 'blur' }],
        addressSelections: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      ids: [],
      // 地址信息
      addressData: regionData,
      warehouse: 'warehouse'
    }
  },
  methods: {
    openFn () {
      // console.log(this.or)
      if (this.or === 1) {
        console.log('新建', 'or:', this.or)
      } else if (this.or === 2) {
        //
        // this.editFn()
      }
    },
    closeFn () {
      this.$emit('update:visible', false)
    },
    async confirmFn () {
      if (this.or === 1) {
        console.log('新增')
        const arr = []
        arr.push(
          this.form.province,
          this.form.city,
          this.form.town,
          this.form.dec
        )
        this.$emit('add', arr)
        this.form.addr = arr.join('-')
        const obj = {
          name: this.form.name,
          addr: this.form.addr,
          areaCode: this.form.cityCode,
          createUserId: 1,
          regionId: this.form.regionId, // 所在区域,
          businessId: this.form.businessId,
          ownerId: this.form.ownerId,
          ownerName: this.form.ownerName
        }
        try {
          await this.$refs.form.validate()
          await CreatePonit({ ...obj })
          this.$message.success('创建成功')
          this.closeFn()
          await this.$parent.getPointListFn()
          this.$refs.form.resetFields()
          this.form.dec = ''
          console.log(this.form)
        } catch (error) {}
      } else {
        console.log(this.rows)

        // 开始
        for (let i = 0; i < this.form.addressSelections.length; i++) {
          if (i === 0) {
            this.form.province = CodeToText[this.form.addressSelections[i]]
          }
          if (i === 1) {
            this.form.city = CodeToText[this.form.addressSelections[i]]
          }
          if (i === 2) {
            this.form.town = CodeToText[this.form.addressSelections[i]]
          }
        }
        const arr1 = []
        arr1.push(
          this.form.province,
          this.form.city,
          this.form.town,
          this.form.dec
        )
        const addr = arr1.join('-')
        console.log(addr)
        // 结束
        const obj = {
          name: this.form.name,
          addr,
          areaCode: this.form.cityCode,
          createUserId: 1,
          regionId: this.form.regionId, // 所在区域,
          businessId: this.form.businessId,
          ownerId: this.form.ownerId,
          ownerName: this.form.ownerName
        }
        await this.$refs.form.validate()
        try {
          await editList({ ...obj, id: this.id })
          this.$message.success('更新成功')
          await this.getPointListFn()
          console.log('提交成功')
        } catch (error) {
          this.$message.error(error.response
            .data)
        } finally {
          this.closeFn()
        }
      }
    },
    handleAddress () {
      for (let i = 0; i < this.form.addressSelections.length; i++) {
        if (i === 0) {
          this.form.province = CodeToText[this.form.addressSelections[i]]
        }
        if (i === 1) {
          this.form.city = CodeToText[this.form.addressSelections[i]]
        }
        if (i === 2) {
          this.form.town = CodeToText[this.form.addressSelections[i]]
        }
      }
      this.getAddressInfo()
    },
    getAddressInfo () {
      this.form.addressSelections = []
      this.form.provinceCode = this.form.province
        ? TextToCode[this.form.province].code
        : ''
      this.form.cityCode = this.form.city
        ? TextToCode[this.form.province][this.form.city].code
        : ''
      this.form.townCode = this.form.town
        ? TextToCode[this.form.province][this.form.city][this.form.town].code
        : ''
      this.form.addressSelections.push(this.form.provinceCode)
      this.form.addressSelections.push(this.form.cityCode)
      this.form.addressSelections.push(this.form.townCode)
      // console.log(this.form.addressSelections)
    },
    changFn (e) {
      // console.log(e)
      const res = this.hzsList.filter((item) => item.name === e)
      // console.log(res)
      this.form.ownerId = res[0].value
      this.form.ownerName = res[0].name
    },
    editFn () {
      const arr = this.rows.addr.split('-').slice(0, 3)
      // console.log(arr)
      // 地区文字转code
      this.form.addressSelections = []
      // 省
      this.form.provinceCode = arr[0]
        ? TextToCode[arr[0]].code
        : ''
      // 市
      this.form.cityCode = arr[1]
        ? TextToCode[arr[0]][arr[1]].code
        : ''
      // 区
      this.form.townCode = arr[2]
        ? TextToCode[arr[0]][arr[1]][arr[2]].code
        : ''
      this.form.addressSelections.push(this.form.provinceCode)
      this.form.addressSelections.push(this.form.cityCode)
      this.form.addressSelections.push(this.form.townCode)
      // console.log(this.form.addressSelections)
    }
  },
  inject: ['getPointListFn']
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
  border-radius: 15px;
}
/deep/ .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: left;
  font-weight: 700;
}
/deep/ .el-dialog__body {
  padding: 20px 20px;
}
.cancel {
  width: 80px;
  height: 36px;
  color: #655b56 !important;
  background-color: antiquewhite;
  border: none;
}
.comfirm {
  width: 80px;
  height: 36px;
  color: #fff;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: none;
}
</style>
